
<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_tms_waybill_scheduling')" :visible.sync="visible" custom-class="dialog_big"
    destroy-on-close close-on-click-modal v-loading="loading" @close="hide">

    <el-form :label-width="$globalCss.formLabelWidth_default" :model="form" :rules="rules" ref="Form">
      <ex_header_spiler :title="$tt('label_base_info')"></ex_header_spiler>
      <div class="flex_row_wrap">
        <el-form-item v-if="!hideSize" :label="$tt('label_tms_planned_tran_number')" class="form_item_mini">
          {{ showItem.size }}
        </el-form-item>
        <el-form-item :label="$tt('label_tms_operation_project')" class="form_item_mini">
          {{ showItem.schemeName }}
        </el-form-item>
        <el-form-item :label="$tt('label_tms_assigned_carrier')" class="form_item_mini">
          {{ showItem.esCarrierName }}
        </el-form-item>


        <el-form-item :label="$tt('label_total_box_count')" class="form_item_mini">
          {{ showItem.totalBox }}
        </el-form-item>
        <el-form-item :label="$tt('label_total_sku_count')" class="form_item_mini">
          {{ showItem.totalQuantity }}
        </el-form-item>
        <el-form-item :label="$tt('label_total_weight')" class="form_item_mini">
          {{ showItem.totalWeight }}
        </el-form-item>
        <el-form-item :label="$tt('label_total_volume')" class="form_item_mini">
          {{ showItem.totalVolume }}
        </el-form-item>
      </div>
      <div class="flex_row_wrap">
        <el-button type="primary" @click="carrierShow = true">服务商重新分配</el-button>
        <el-button type="primary" @click="driverShow = true">司机调度</el-button>
      </div>
      <div v-show="carrierShow">
        <ex_header_spiler :title="$tt('label_tms_common_carrier')"></ex_header_spiler>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :label="$t('label_tms_waybill_carrier_name')" label-width="90px">
              <div style="display: flex;">
                <el-input v-model="filterData.carrierName" clearable></el-input>
                <el-button style="margin-left: 10px;" type="primary" @click="$refs.table_carrier.reload()">{{ $t('label_query') }}</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="" prop="carrier" label-width="0">
          <el-radio-group v-model="form.carrier" class="w_fill">
            <ex_super_table_page v-bind="option_table" :autoLoad="false" ref="table_carrier" style="height: 300px;"
              @row-click="rowClickCarrier">
              <template v-slot:radio="{ row }">
                <el-radio style="margin-left: 10px;" :label="row" :key="row.carrierId">{{ "" }}</el-radio>
              </template>
            </ex_super_table_page>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-show="driverShow">
        <ex_header_spiler :title="$tt('label_tms_carrier_driver')"></ex_header_spiler>
        <div v-show="driverTableData.length>0">
          <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item :label="$t('label_tms_driver')" label-width="80px">
              <div style="display: flex;">
                <el-input v-model="filterData.driverName"  clearable></el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('label_tms_vehicle_license_number')" label-width="80px">
              <div style="display: flex;">
                <el-input v-model="filterData.vehicleNo"  clearable></el-input>
                <el-button style="margin-left: 10px;" type="primary" @click="$refs.table_driver.reload()">{{ $t('label_query') }}</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" prop="driver" label-width="0">
          <el-radio-group v-model="form.driver" class="w_fill">
            <ex_super_table v-bind="option_driver" ref="table_driver" :height="300"
              @row-click="(row, column, event) => form.driver = row">
              <template v-slot:radio="{ row }">
                <el-radio style="margin-left: 10px;" :label="row" :key="row.id">{{ "" }}</el-radio>
              </template>
            </ex_super_table>
          </el-radio-group>
        </el-form-item>
        </div>
        <div v-if="driverTableData.length === 0">
          <el-form-item :label="$t('label_tms_driver')" prop="driver.driverName" label-width="80px">
            <el-input v-model="form.driver.driverName" clearable />
          </el-form-item>
          <el-form-item :label="$t('label_tms_contact_number')" prop="driver.driverPhone" label-width="80px">
            <el-input v-model="form.driver.driverPhone" clearable />
          </el-form-item>
          <el-form-item :label="$t('label_tms_vehicle_license_number')" prop="driver.vehicleNo" label-width="80px">
            <el-input v-model="form.driver.vehicleNo" clearable />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submitReady">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      waybillIds:[],
      hideSize:false,
      carrierShow:false,
      driverShow:false,
      showItem: {},
      form: {
        carrier: null,
        driver: {
          driverName:'',
          driverPhone:'',
          vehicleNo:''
        },
        schemeId: null
      },
      visible: false,

      loading: false,
      items: [],
      rules: {
        // 'driver.driverName':[ { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
        // 'driver.driverPhone':[ { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
        // 'driver.vehicleNo':[ { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
      },
      option_table: {
        table: {
          url: "/tms-api/waybill/TmsWaybillInfoQueryRpc/selectTransferToPeer.json",
          urlParams: (params) => {
            return Object.assign({
              waybillIds: this.waybillIds,
              carrierName:this.filterData.carrierName
            }, params)
          },
          model: [
            { slot: "radio", },
            { key: 'carrierName', label: 'label_srm_supplier_name', 'min-width': 100, 'show-overflow-tooltip': true, },
            {
              key: 'prescription', label: '时效', 'min-width': 100, 'show-overflow-tooltip': true,
            },
            // {
            //   key: '', label: 'label_sign_contract', 'min-width': 100, 'show-overflow-tooltip': true,
            //   formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum")
            // },
            // { key: '', label: 'label_service_items', 'min-width': 100, 'show-overflow-tooltip': true, },

          ]
        }

      },
      option_driver: {
        url: "/tms-api/waybill/TmsTaskInfoQueryRpc/pageCarrierVehicleInfo.json",
        urlParams: () => {
          return {
            carrierId: this.form.carrier && this.form.carrier.carrierId,
            driverName:this.filterData.driverName,
            vehicleNo:this.filterData.vehicleNo
          }
        },
        urlDataHandle:({data})=>{
          this.driverTableData = data.rows
          return this.driverTableData
        },
        model: [
          { slot: "radio", },
          { key: 'driverName', label: 'label_tms_driver', 'min-width': 100, 'show-overflow-tooltip': true, },
          {
            key: 'vehicleNo', label: 'label_tms_vehicle_license_number', 'min-width': 100, 'show-overflow-tooltip': true,
            // formatter: (r, c, v, i) => this.$enumShow(v, "TransportSectionEnum")
          },
          {
            key: 'vehicleType', label: 'label_tms_vehicle_vehicle_model', 'min-width': 100, 'show-overflow-tooltip': true,

          },
          {
            key: 'volume', label: '车辆内空', 'min-width': 100, 'show-overflow-tooltip': true,
            // formatter: (r, c, v, i) => this.$enumShow(v, "LogisticsProductsTypeEnum")
          },
          {
            key: 'loadWeight', label: 'label_tms_vehicle_bearing_capacity_1', 'min-width': 100, 'show-overflow-tooltip': true,

          },
          {
            key: 'driverWorkStatusDesc', label: 'label_tms_vehicle_vehicle_state', 'min-width': 100, 'show-overflow-tooltip': true,
          },

        ]
      },
      filterData:{
        carrierName:'',
        driverName:'',
        vehicleNo:''
      },
      driverTableData:[],
    }
  },
  computed: {
    orderParams() {
      return this.items.map(it => {
        return {
          id: it.id,
          version: it.version,
        }
      })
    },

  },
  watch: {
    "form.carrier"(newVal, oldVal) {
      if (newVal) {
        this.$refs.table_driver.reload()
      }
    }
  },
  methods: {
    show(items,hideSize=false) {
      this.hideSize = hideSize
      this.visible = true

      this.waybillIds = []
      items.forEach(item=>{
        this.waybillIds.push(item.id)
      })

      this.form.carrier = null
      this.form.driver = {
          driverName:'',
          driverPhone:'',
          vehicleNo:''
        }
      this.items = items
      this.getBaseInfo()

    },
    getBaseInfo(){
      this.$ajax({

        url: "/tms-api/waybill/TmsWaybillInfoQueryRpc/mergeScheduling.json",
        method: 'post', type: 'json',
        loading: true,
        data: {
          waybillIdAndVersionList: this.orderParams,
        },
        complete: () => {
          this.loading = false

        },
        success: (res) => {
          this.showItem = res.data

          this.form.carrier = {
            carrierId: res.data.esCarrierId,	//long 	预分配承运商id
            carrierName: res.data.esCarrierName,//	string 	预分配承运商名称
            schemeId: res.data.schemeId,//	long 	运营方案id
          }

          this.$refs.table_carrier.reload()
        },
        failure: (res) => {
          this.hide()
        },
        })
    },
    rowClickCarrier(row, column, event)  {
        this.form.carrier = row
        this.filterData.driverName=''
        this.filterData.vehicleNo=''
        this.form.driver = {
          driverName:'',
          driverPhone:'',
          vehicleNo:''
        }
    },
    hide() {
      this.visible = false
      this.carrierShow = false
      this.driverShow = false
      this.driverTableData=[]
    },
    submitReady() {

      let text = this.$tt('label_tms_dispatch_carriers', { carrier: (this.form.carrier && this.form.carrier.carrierName) || this.showItem.esCarrierName })
      if (this.form.driver.driverName) {
        text += "，" + this.$tt('label_tms_dispatch_driver', { driverName: this.form.driver.driverName })
      }

      this.$refs['Form'].validate((valid) => {
        if (valid || (!this.driverShow&&this.driverTableData.length===0)) {
          this.$confirm(text, this.$tt('label_tip'), {
            type: 'warning'
          }).then(() => {
            this.submit();
          })
        } else {
          this.$message.error(this.$tt('form_validate_error'))
          return false;
        }
      });

    },
    submit() {

      let data = {
        waybillIdAndVersionList: this.orderParams,
      }
      if (this.form.carrier) {
        if(this.form.carrier.carrierId){
          Object.assign(data, {
            carrierId: this.form.carrier.carrierId,	//long 	预分配承运商id
            carrierName: this.form.carrier.carrierName,//	string 	预分配承运商名称
            schemeId: this.form.carrier.schemeId,//	long 	运营方案id
            prescription: this.form.carrier.prescription,//	long 	运营方案id
          })
        }

        if (this.form.driver) {
          Object.assign(data, {
            driverId: this.form.driver.driverId,//	long 	预分配司机id
            driverName: this.form.driver.driverName,//		string 	预分配司机名称
            driverPhone: this.form.driver.driverPhone,//		string 	司机电话
            vehicleId: this.form.driver.id,//	long 	车辆id
            vehicleNo: this.form.driver.vehicleNo,//
          })
        }
      }

      this.$ajax({
        url: "/tms-api/waybill/TmsWaybillInfoOperationRpc/mergeScheduling.json",
        method: 'post', type: 'json',
        loading: true,
        data,
        success: (res) => {
          this.$message.success(this.$tt('tip_submit_success'))
          this.hide()
          this.$emit('submitSuccess')
        },
      })
    }
  }
}
</script>
